import { Draw } from "../../../Draw/Draw";
import { IKonva } from "../../../Interface/IKonva";
import { setGroupDraggable } from "./group-draggable";

export function groupEchartDbclick(e: IKonva.Event, draw: Draw) {
  e.cancelBubble = true;
  const echart = e.target;

  //  1. 拿到数据源
  const { xAxis, series, echartTitle = "", echartType } = echart.attrs;
  //   2. 打开弹窗
  const dialog = draw.getDialog();
  dialog.open({
    width: 720,
    height: 440,
    title: "统计图配置",
    content: createEchartTemp({ xAxis, series, echartTitle, echartType }),
    onConfirm: ({ echartType, xAxis, series, echartTitle }) => {
      echart.setAttrs({ echartType, xAxis, series, echartTitle });
      draw.render();
      // 恢复拖拽
      setGroupDraggable(draw, true);
    },
  });
}

function createEchartTemp(payload: IKonva.EchartConfig) {
  const { xAxis, series, echartTitle, echartType } = payload;

  let thead = ``;

  series.forEach((item) => {
    thead += `<th><input data-check="false" value="${item.name}" /></th>`;
  });

  let tbody = "";
  xAxis.forEach((item, index) => {
    let td = "";
    series.forEach(({ data }) => {
      td += `<td><input value="${data[index]}" /></td>`;
    });

    tbody += `
    <tr>
      <td><input data-check="false" value="${item}" /></td>
      ${td}
    </tr>
    `;
  });

  const temp = `
<div class="konva-root-dialog-echart">
    <!-- 行列 -->
    <div class="header">
        <span>统计图类型:</span>
        <select id="type">
            <option ${
              echartType === "line" ? "selected" : ""
            } value="line">折线图</option>
            <option ${
              echartType === "bar" ? "selected" : ""
            } value="bar">柱状图</option>
            <option ${
              echartType === "pie" ? "selected" : ""
            } value="pie">饼图</option>
            <option ${
              echartType === "radar" ? "selected" : ""
            } value="radar">雷达图</option>
        </select>
        <br/>
        <span>统计图标题:</span>
        <input id="title" value="${echartTitle}" />
        <br/>
        <span>类别:</span>
        <input type="number" min="1" value="${xAxis.length}" id="category" />
        <span>系列:</span>
        <input type="number" min="1" value="${series.length}" id="series" />
    </div> 
    <table>
        <thead>
            <tr>
                <th></th>
                ${thead}
            </tr>
        </thead>
        <tbody>
            ${tbody}
        </tbody>
    </table>
</div>
   `;

  return temp;
}
